<template name="home">
	<view>
		<view id="head">
			<view class="cu-bar justify-center bg-white margin-bottom-xs">
				<text class="content text-black text-lg text-bold">数字农服</text>
			</view>

			<view class=" bg-white grid col-4 padding-lr-sm no-border margin-bottom-xs margin-lr-xs">
				<view class="padding-sm animation-slide-bottom" :style="[{animationDelay: (index + 1)*0.1 + 's'}]" v-for="(item,index) in usList"
				 :key="index" @tap="goPage(item.page)">
					<view class="radius text-center">
						<view class="cu-avatar lg" :style="{background: 'url(' + item.icon + ') no-repeat',backgroundSize:'96upx 96upx'}">
							<view class="cu-tag badge" v-if="getTtemDotInfo(item)">{{getTtemDotInfo(item)}}</view>
						</view>
						<view class="text-sm margin-top">{{item.title}}</view>
					</view>
				</view>
			</view>

			<view class="cu-bar bg-white shadow" style="padding-bottom: 5rpx;margin-bottom: 10rpx;">
				<image src="../../static/user/tuijian.jpg" style="height: 100rpx;width:auto;" mode="heightFix"></image></text>
			</view>
		</view>
		<scroll-view id="scrollbody" class="bg-white" scroll-y="true" :style="{height:scrollerHeight}">
			<view class="cu-card article no-card">
				<view class="cu-item" style="padding-bottom: 0rpx;" v-for="item in topN5" :key="item.id" @tap="goDetail(item)">
					<view class="title">
						<view class="text-cut">{{item.title}}</view>
					</view>
					<view class="content">
						<view class="desc margin-right-sm">
							<view class="text-gray flex align-center justify-between" style="font-size: 12px;">
								<view class="flex align-center justify-between">
									<view class="cu-avatar round sm margin-right-sm" :style="{backgroundImage: 'url('+ item.portrait +')'}"></view>
									<view class="text-grey text-sm text-bold">{{item.realname}}</view>
								</view>
							</view>
							<view class="text-content" style="color: #333333;">{{item.content}}</view>
							<!-- <view class="text-content" style="color: #333333;">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</view> -->
						</view>
						<!-- <image src="https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg" mode="aspectFill"></image> -->
						<image v-if="item.pics.length >= 1" :src="item.pics[0]" mode="aspectFill"></image>
					</view>
					<view class="text-sm flex justify-between" style="padding: 10upx 30upx 10upx;color: #afafaf">
						<view>
							<text class="cuIcon-attentionfill margin-lr-xs"></text>{{item.viewCount}}
							<text class="cuIcon-appreciatefill margin-lr-xs"></text> {{item.zanNum}}
							<text class="cuIcon-messagefill margin-lr-xs"></text> {{item.commentNum}}
						</view>
						<view class="text-sm">{{item.time}}</view>
					</view>
					<view class="padding-bottom-sm bg-gray"></view>
				</view>
			</view>
		</scroll-view>
		<view id="foot" class="bg-white cu-tabbar-height"></view>
	</view>
</template>

<script>
	import {
		us
	} from '@/common/util/work.js'
	export default {
		name: 'home',
		props: {
			cur: String,
		},
		watch: {
			cur: {
				immediate: true,
				handler() {
					this.tarCur = this.cur
					//console.log('watch',this.cur)
					this.initMenu();
					this.getQuestionList();
				},
			},
		},
		data() {
			return {
				phoneHeight: 0, //屏幕可用高度
				topHeight: 0, //滑块上方高度
				bottomHeight: 0, //底部高度
				scrollerHeight: "",

				topN5: [],
				usList: us.data,
				websock: '',
				heartCheck: null,
				connected: false,
				msgCount: 0,
				dot: {
					mailHome: false
				},
				questionUrl: this.$config.apiUrl + "/questionController/getQuestionListTopN",
			}
		},
		onReady() {
			var height
			var _this = this;
			uni.getSystemInfo({
				success: function(res) {
					_this.phoneHeight = res.windowHeight;
					//console.log("phoneHeight:" + res.windowHeight)
					let view = uni.createSelectorQuery().select("#head"); //局部滑块
					view.boundingClientRect(data => {
						_this.topHeight = data.height;
						//console.log("topHeight:"+data.height)
						let otherview = uni.createSelectorQuery().select("#foot");
						otherview.boundingClientRect(data => {
							_this.bottomHeight = data.height
							//console.log("bottomHeight:"+data.height)
							height = _this.phoneHeight - _this.topHeight - _this.bottomHeight;
							//console.log("scrollerHeight:"+height)
						}).exec();
					}).exec();
				},
			}); 
			this.scrollerHeight = height + 'px';
		},
		methods: {
			initMenu() {
				// this.initWebSocket();
				// this.loadCount(0);
			},
			goPage(page) {
				if (!page) {
					return false;
				}
				if (page === 'annotationList') {
					this.msgCount = 0
				}
				this.dot[page] = false
				this.$Router.push({
					name: page
				})
			},
			goDetail: function(e) {
				this.$Router.push({
					name: 'nswd_comment',
					params: e
				})
			},
			initWebSocket: function() {
				// WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
				var userId = this.$store.getters.userid;
				//console.log('userId :>>'+userId);
				if (userId) {
					var url = this.$config.apiUrl.replace("https://", "wss://").replace("http://", "ws://") + "/websocket/" + userId;
					//console.log('websocket url>>' + url);
					uni.connectSocket({
						url: url
					})
					uni.onSocketOpen(function(res) {
						//console.log('WebSocket连接已打开！');
					})
					uni.onSocketError(function(res) {
						//console.log('WebSocket连接打开失败，请检查！');
						this.reconnect();
					})
					uni.onSocketMessage((res) => {
						//console.log("-----接收消息-------", res.data);
						var data = eval("(" + res.data + ")"); //解析对象
						if (data.cmd == "topic") {
							//系统通知
							this.loadCount('1')
						} else if (data.cmd == "user") {
							//用户消息
							this.loadCount('2')
						} else if (data.cmd == 'email') {
							this.loadEmailCount()
						}
					})
					uni.onSocketClose((res) => {
						this.connected = false
						//console.log('WebSocket连接已关闭！');
					})
				}
			},
			reconnect() {
				var that = this;
				if (that.connected) return;
				that.connected = true;
				//没连接上会一直重连，设置延迟避免请求过多
				setTimeout(function() {
					//console.info("尝试重连...");
					that.initWebSocket();
					that.connected = false;
				}, 5000);
			},
			loadCount(flag) {
				//console.log("loadCount::flag",flag)
				var userId = this.$store.getters.userid;
				// console.log(userId);
				if (userId) {
					let url = '/sys/annountCement/listByUser';
					this.$http.get(url).then(res => {
						//console.log("res::",res)
						if (res.data.success) {
							let msg1Count = res.data.result.anntMsgTotal;
							let msg2Count = res.data.result.sysMsgTotal;
							this.msgCount = msg1Count + msg2Count
							//console.log("this.msgCount",this.msgCount)
						}
					})
				}

			},
			loadEmailCount() {
				this.dot.mailHome = true
			},
			getTtemDotInfo(item) {
				if (item.page === 'annotationList' && this.msgCount > 0) {
					return this.msgCount
				}
				return '';
			},
			getQuestionList: function() {
				this.$http.get(this.questionUrl, {
					params: {
						topN: 5
					}
				}).then(res => {
					//console.log("res",res)
					if (res.data.ok) {
						this.topN5 = res.data.data;
						for (var i = 0; i < this.topN5.length; i++) {
							let avatar = (this.topN5[i].portrait && this.topN5[i].portrait.length > 0) ? this.$config.imgUrl + '/' + this
								.topN5[i].portrait :
								'/static/avatar_boy.png'
							this.topN5[i].portrait = avatar;
							//图片
							let imgUrl = [];
							let imgList = [];
							imgUrl = (this.topN5[i].picturesUrl == null || this.topN5[i].picturesUrl == "") ? '' : this.topN5[i].picturesUrl
								.split(",");
							for (var j = 0; j < imgUrl.length; j++) {
								if (imgUrl[j] != '' && imgUrl[j] != null) {
									var imgSerUrl = this.$config.imgUrl + '/' + imgUrl[j];
									imgList.push(imgSerUrl);
								}
							}
							this.topN5[i].pics = imgList;
							this.topN5[i].isZan=this.topN5[i].isZan==0?false:true;
						}
					}
				}).catch(err => {
					console.log(err);
				});
			},
		}
	}
</script>

<style>
	.cu-card.article>.cu-item .title {
		font-size: 30upx;
		font-weight: 900;
		color: #333333;
		line-height: 60upx;
		padding: 0 30upx;
	}

	.cu-card.article>.cu-item .content>image {
		width: 180upx;
		height: 4.8em;
		margin-right: 20upx;
		border-radius: 6upx;
	}

	.cu-card.article>.cu-item .content .desc {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.cu-card.article>.cu-item .content .text-content {
		font-size: 26upx;
		color: #888;
		height: 3.2em;
		overflow: hidden;
	}
</style>
